<template>
  <div>
    <el-row class="home" :gutter="20" style="height: auto">
      <el-col :span="8">
        <el-card shadow="hover" body-style="padding: 0">
          <div class="user">
            <img :src="userImg">
            <div class="userInfo">
              <p class="name">{{ username }}</p>
              <p class="access">超级管理员</p>
            </div>
          </div>
          <el-divider></el-divider>
          <ul class="loginInfo">
            <li>上次登录时间：<span>{{ lastLoginTime }}</span></li>
            <li>本次登录时间：<span>{{ loginTime }}</span></li>
          </ul>
        </el-card>
        <el-card style="margin-top: 20px" body-style="padding: 0px">
          <el-table
              class="tableData"
              :data="tableData"
              stripe
              style="width: 100%;">
            <el-table-column
                prop="name"
                :label="tableLabel.name"
                width="100"
                align="center">
            </el-table-column>
            <el-table-column
                prop="todaBuy"
                :label="tableLabel.dayBuy"
                width="100"
                align="center">
            </el-table-column>
            <el-table-column
                prop="mothBuy"
                :label="tableLabel.monthBuy"
                width="100"
                align="center">
            </el-table-column>
            <el-table-column
                prop="totalBuy"
                :label="tableLabel.totalBuy"
                width="100"
                align="center">
            </el-table-column>

          </el-table>
        </el-card>
      </el-col>
      <el-col :span="16">
        <div class="numPart" style="height: auto;width: auto">
          <el-card
              class="oneTarget"
              shadow="hover"
              body-style="padding:0px;display:flex"
              v-for="item in countData"
              :key="item.name">
            <i class="icon" :class="`el-icon-${item.icon}`" :style="{ background:item.color}"></i>
            <div class="detil">
              <p class="goodsnum"> ￥{{ item.value }}</p>
              <p class="txt"> {{ item.name }}</p>
            </div>
          </el-card>
        </div>
        <el-card shadow="hover" style="height: 280px">
          <div id="salesVolumes"></div>
        </el-card>
        <div class="graph">
          <el-card shadow="hover" style="height: 280px"></el-card>
          <el-card shadow="hover" style="height: 280px"></el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {HttpRequest} from "@/utils/api/axios";

export default {
  name: "Home",
  data() {
    return {
      userImg: require('@/assets/user.png'),

      tableData: [
        {
          name: 'oppo',
          todaBuy: 100,
          price: 2356,
          mothBuy: 300,
          totalBuy: 800
        },
        {
          name: '小米',
          todaBuy: 300,
          price: 5364,
          mothBuy: 600,
          totalBuy: 1200
        },
        {
          name: '华为',
          todaBuy: 200,
          price: 2354,
          mothBuy: 300,
          totalBuy: 400
        },
        {
          name: 'apple',
          todaBuy: 110,
          price: 7562,
          mothBuy: 330,
          totalBuy: 840
        },
        {
          name: 'vivo',
          todaBuy: 104,
          price: 8913,
          mothBuy: 302,
          totalBuy: 850
        }],
      tableLabel: {
        name: '手机品牌',
        dayBuy: '今日购买',
        price: '单价',
        monthBuy: '本月购买',
        totalBuy: '总购买',
      },
      countData: [
        {
          name: "今日支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9"
        },
        {
          name: "今日收藏数量",
          value: 1210,
          icon: "star-on",
          color: "#ffb980"
        },
        {
          name: "今日未支付订单",
          value: 1234,
          icon: "s-goods",
          color: "#f591af"
        },
        {
          name: "本月支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9"
        },
        {
          name: "本月收藏订单",
          value: 1234,
          icon: "star-on",
          color: "#ffb980"
        },
        {
          name: "本月未支付订单",
          value: 1234,
          icon: "s-goods",
          color: "#f591af"
        }
      ]
    }
  },
  created() {
    const getRequest = new HttpRequest();
    //getRequest.axiosGet('ncov/index', {params: {key: '04e6c3f9bbb01b629b434e841dcb3c23'}}).then(res => console.log(res));
  },
  mounted() {
    this.salesVolumesAnalyse();
  },
  computed: {
    username() {
      return this.$store.getters['loginUser/getUsername'];
    },
    lastLoginTime() {
      return this.$store.getters['loginUser/getLastLoginTime'];
    },
    loginTime() {
      return this.$store.getters['loginUser/getLoginTime'];
    },
    goodsnameArr() {
      const nameArr = []
      this.tableData.forEach(item => {
        nameArr.push(item.name)
      })
      return nameArr
    },
    goodsPriceArr() {
      const PrinceArr = []
      this.tableData.forEach(item => {
        PrinceArr.push(item.price * item.todaBuy)
      })
      return PrinceArr
    }
  },
  methods: {
    salesVolumesAnalyse() {
      let salesVolumesEcharts = this.$echarts.init(document.getElementById('salesVolumes'));
      salesVolumesEcharts.setOption({
        title: {
          text: '当日销售额'
        },
        tooltip: {
          trigger: 'item',
          extraCssText: 'width:auto;height:auto'
        },
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: this.goodsnameArr,
        },
        yAxis: {},
        series: [
          {
            type: 'bar',
            data: this.goodsPriceArr
          }
        ]
      });
    }
  }
}
</script>

<style lang="less" scoped>

ul, li {
  list-style: none;
}

.el-card {
  height: auto;

  p {
    display: inline-block;
    height: auto;
    width: auto;
  }

  hr {
    width: 22vw;
  }

  .user {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: auto;
    margin-top: 10px;

    img {
      width: 150px;
      height: 150px;
      border-radius: 75px;
    }

    .userInfo {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      width: auto;

      .name {
        color: #333333;
        font-size: 30px;
        font-weight: 300;
      }

      .access {
        color: #9d9d9d;
      }
    }
  }

  .loginInfo {
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 0 10px 50px;
    color: #a3a3a3;
    font-size: 5px;

    li {
      margin: 5px;

      span {
        color: #666666;
      }
    }
  }
}

.numPart {
  display: flex;
  flex-wrap: wrap;

  .oneTarget {
    width: 200px;
    height: 70px;
    margin: 0 5px 10px;
    display: flex;

    .icon {
      width: 130px;
      height: 70px;
      font-size: 30px;
      color: white;
      line-height: 70px;
      text-align: center;
    }

    .detil {
      display: flex;
      flex-direction: column;
      align-items: center;
      user-select: none;

      p:nth-child(1) {
        font-size: 2vw;
      }

      p:nth-child(2) {
        font-size: 1vw;
        color: #49515b;
      }
    }
  }

}

.graph {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;

  .el-card {
    width: 48%;
  }
}

</style>